// MyEditor.vue 文件
<template>
    <div style="border: 1px solid #ccc;">
        <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                :mode="mode"
        />
        <Editor
                style="height: 500px; overflow-y: hidden;"
                v-model="html"
                :defaultConfig="editorConfig"
                :mode="mode"
                @onCreated="onCreated"
                @onChange="onChange"
        />
    </div>
</template>

<script>
    import Vue from 'vue'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

    export default {
        name: "MyEditor",
        components: { Editor, Toolbar },
        data() {
            let that = this;
            return {
                editor: null,
                html: '',
                toolbarConfig: {
                    excludeKeys:[
                        'group-video'//去掉视频上传的工具栏
                    ]
                },
                editorConfig: {
                    placeholder: '请输入内容...',
                    // 所有的菜单配置，都要在 MENU_CONF 属性下
                    MENU_CONF: {
                        //配置上传图片
                        uploadImage: {
                            //自定义上传，比如需要上传到阿里云OSS，通过customUpload来自定义，后面uploadImg方法需要自己写上传
                            //customUpload: this.uploadImg
                            //服务端地址,必填，否则上传图片会报错。
                            //server:'http://localhost:8080/manage/uploadWangEditorPic',
                            //在main.js中定义全局变量Vue.prototype.$uploadPicServerPath="http://localhost:8080/manage/uploadWangEditorPic";
                            server:that.server,

                            // form-data fieldName ，默认值 'wangeditor-uploaded-image'
                            fieldName: 'file',

                            // 单个文件的最大体积限制，默认为 2M
                            maxFileSize: 10 * 1024 * 1024, // 10M

                            // 最多可上传几个文件，默认为 100
                            maxNumberOfFiles: 20,

                            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                            allowedFileTypes: ['image/*'],

                            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                            /*meta: {
                                token: 'xxx',
                                otherKey: 'yyy'
                            },

                            // 将 meta 拼接到 url 参数中，默认 false
                            metaWithUrl: false,
                            */
                            // 自定义增加 http  header
                            headers: {
                                //Accept: 'text/x-json',
                                //otherKey: 'xxx'
                                token:window.localStorage.getItem("manageToken")
                            },

                            // 跨域是否传递 cookie ，默认为 false
                            //withCredentials: true,

                            // 超时时间，默认为 10 秒
                            timeout: 5 * 1000, // 5 秒
                            // 上传之前触发，可以检查文件扩展名等
                            onBeforeUpload(file) {
                                // file 选中的文件，格式如 { key: file }
                                let key = Object.keys(file)[0];
                                /*                                {
                                data: File {name: '4.jpg', lastModified: 1650271589696, lastModifiedDate: Mon Apr 18 2022 16:46:29 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 990369, …}
                                extension: "jpg"
                                id: "uppy-4/jpg-1e-image/jpeg-990369-1650271589696"
                                isRemote: false
                                meta: {name: '4.jpg', type: 'image/jpeg'}
                                name: "4.jpg"
                                preview: undefined
                                progress: {percentage: 0, bytesUploaded: 0, bytesTotal: 990369, uploadComplete: false, uploadStarted: null}
                                remote: ""
                                size: 990369
                                source: ""
                                type: "image/jpeg"
                                }*/
                                let fileInfo = file[key];

                                let ext = fileInfo.extension;
                                //let size = fileInfo.size;
                                //扩展名
                                if (!",jpg,jpeg,png,gif,webp,".includes("," + ext + ",")) {
                                    that.$message.error('只能上传图片(.jpg,.jpeg,.png,.gif,.webp)!');
                                    return false;
                                }
                                return file
                                // 可以 return
                                // 1. return file 或者 new 一个 file ，接下来将上传
                                // 2. return false ，不上传这个 file
                            },
                            //上传失败
                            onFailed(file, res) {
                              console.log(res);
                                that.$message.error(`${file.name} 上传失败`);
                            },
                            // 上传错误，或者触发 timeout 超时
                            onError(file, err, res) {
                                that.$message.error(`${file.name} 上传出错，上传文件大小不能超过2MB!！`)
                            },
                        }
                    }
                },
                mode: 'default', // or 'simple'
            }
        },
        props:{
            value:{
                type:String
            },
            server:{
                type:String
            }
        },
        methods: {
            onCreated(editor) {
                this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
                // onCreated 编辑器创建完毕时的回调函数。设为父组件给的初值
                this.editor.setHtml(this.value);
            },
            // onChange 编辑器内容、选区变化时的回调函数 将变化的数据通过 editor.getText() 得到，通过 子传父 this.$emit 传给父组件
            onChange(editor) {
                this.$emit('input',editor.getHtml());
            },
        },
        // 父组件传过来的值通过 watch 进行监听，变化，就重新赋给 编辑器
        watch:{
            value(val) {
                this.editor.setHtml(val);
            }
        },
        created() {
            // 赋初值
            // this.html = `<p>${this.value}</p>`;
        },
        beforeDestroy() {
            const editor = this.editor
            if (editor == null) return
            editor.destroy() // 组件销毁时，及时销毁编辑器
        }
    }
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
